<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--<style>
    article {
      width: 50%;
      float: left;
      margin-left: 20%;
    }

    nav {
      width: 20%;
      float: left;
      margin-left: -70%;
    }

    aside{
      width: 30%;
      float: left;
    }

  </style>-->

  <style>
    body{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }

    /*
      order 数字从小到大  排列从左往右
    */

    nav{
      order: 0;
    }

    article{
      order: 1;
    }

    aside{
      order: 2;
    }
  </style>

</head>
<body>
<article>article</article>
<nav>nav</nav>
<aside>aside</aside>
</body>
</html>
